<template>
  <div class="box">
    <header class="header">
      <van-nav-bar
        v-if="scrollTop < 50"
        left-arrow
        @click-left="$router.back()"
      >
        <template #right>
          <van-popover
            v-model="showPopover"
            trigger="click"
            placement="bottom-end"
            theme="dark"
            :actions="actions"
            @select="onSelect"
          >
            <template #reference>
              <van-icon name="ellipsis" size="32"/>
            </template>
          </van-popover>
        </template>
      </van-nav-bar>
      <transition name="fade">
      <van-nav-bar
        v-if="scrollTop >= 50"
        :title="proname"
        left-arrow
        @click-left="$router.back()"
      >
        <template #right>
          <van-popover
            v-model="showPopover"
            trigger="click"
            placement="bottom-end"
            theme="dark"
            :actions="actions"
            @select="onSelect"
          >
            <template #reference>
              <van-icon name="ellipsis" size="32"/>
            </template>
          </van-popover>
        </template>
      </van-nav-bar>
      </transition>
    </header>
    <div class="content" ref="content">
      <div class="my-detail-swiper">
        <van-swipe :show-indicators = "false" @change="changeSwiper" :initial-swipe="index - 1">
          <van-swipe-item v-for="(item, index) of banners" :key="index" @click="previewImage">
            <van-image  fit="scale-down" :src="item" />
          </van-swipe-item>
        </van-swipe>
        <div class="my-indicators">
          {{ index }} / {{ banners.length }}
        </div>
        <div class="video-btn" @click="show = true">
          <van-icon name="play-circle-o" size="18" color="#f66"/> {{ time | timeFilter }}
        </div>
      </div>
      <div class="proname">
        <van-tag type="danger">{{ category }}</van-tag> {{ proname }}
      </div>
      <div class="price">
        ¥{{ discount !== 0 ? originprice * discount / 10 : originprice}}
        <del>¥{{ originprice }}</del>
      </div>

      <div class="space">1111</div>
      <van-goods-action  v-if="issale === 0">
        <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" @click="chat"/>
        <van-goods-action-icon icon="cart-o" text="购物车" @click="toCart"/>
        <van-goods-action-button type="warning" disabled text="商品已下架" />
      </van-goods-action>
      <van-goods-action v-else>
        <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" @click="chat"/>
        <van-goods-action-icon icon="cart-o" text="购物车" @click="toCart"/>
        <van-goods-action-button type="warning" text="加入购物车" @click="addCartFn"/>
        <van-goods-action-button type="danger" text="立即购买" />
      </van-goods-action>

    </div>
    <van-share-sheet
      v-model="showShare"
      title="立即分享给好友"
      :options="options"
    />
    <van-overlay :show="show" @click="show = false">
      <video controls class="my-video" ref="vdo" :src="vdoSrc"></video>
    </van-overlay>
  </div>
</template>

<script>
import Vue from 'vue'
import { Toast, Tag, NavBar, Popover, ShareSheet, Icon, Swipe, SwipeItem, Image as VanImage, ImagePreview, Overlay, GoodsAction, GoodsActionIcon, GoodsActionButton } from 'vant'
import { getProDetailData } from './../../api/detail'
import { addCart } from './../../api/cart'
Vue.use(Toast)
Vue.use(Tag)
Vue.use(NavBar)
Vue.use(Popover)
Vue.use(ShareSheet)
Vue.use(Icon)
Vue.use(Swipe)
Vue.use(SwipeItem)
Vue.use(VanImage)
Vue.use(ImagePreview)
Vue.use(Overlay)
Vue.use(GoodsAction)
Vue.use(GoodsActionIcon)
Vue.use(GoodsActionButton)
export default {
  data () {
    return {
      showPopover: false,
      // 通过 actions 属性来定义菜单选项 <van-icon name="location-o" />
      actions: [
        { index: 0, text: '首页', icon: 'location-o' },
        { index: 1, text: '分类', icon: 'like-o' },
        { index: 2, text: '购物车', icon: 'shopping-cart-o' },
        { index: 3, text: '个人中心', icon: 'friends-o' },
        { index: 4, text: '分享', icon: 'share-o' }
      ],
      showShare: false, // 分享面板
      options: [
        { name: '微信', icon: 'wechat' },
        { name: '微博', icon: 'weibo' },
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' }
      ],
      proid: '',
      banners: [], // 轮播图数据
      proname: '', // 产品名称
      originprice: 0, // 原价
      category: '', // 分类
      discount: 0, // 折扣
      issale: 0, // 是否在售卖
      index: 1,
      show: false, // 视频播放器
      vdoSrc: 'https://vod.300hu.com/4c1f7a6atransbjngwcloud1oss/2f9ff93e332543321040232449/v.f20.mp4?dockingId=dd606c09-5aa5-449d-9faa-442ac07456f2&storageSource=3',
      // vdoSrc: 'https://jvod.300hu.com/vod/product/c3cf94d5-6fb9-4354-9f18-cc01c19350ff/f98fc5d1f64d40b2b667940ebc36bae3.mp4',
      time: 0, // 视频的播放时长
      scrollTop: 0
    }
  },
  mounted () {
    const proid = this.$route.params.proid
    getProDetailData(proid).then(res => {
      console.log(res.data.data)
      const banners = res.data.data.banners[0]
      this.proid = proid
      this.banners = banners.split(',') // 特殊处理，并不是所有项目都需要
      this.proname = res.data.data.proname
      this.originprice = res.data.data.originprice
      this.category = res.data.data.category
      this.discount = res.data.data.discount
      this.issale = res.data.data.issale
      console.log(this.$refs.vdo.duration)
    })
    setTimeout(() => {
      this.time = this.$refs.vdo.duration // 计算视频的总时长
    }, 1000)
    this.$refs.content.addEventListener('scroll', () => {
      this.scrollTop = this.$refs.content.scrollTop
    }, false)
  },
  filters: {
    timeFilter (val) { // 过滤器处理时间显示格式
      let a = Math.floor(val / 60)
      let b = Math.floor(val % 60)
      a = a < 10 ? '0' + a : a
      b = b < 10 ? '0' + b : b
      return a + '‘' + b
    }
  },
  methods: {
    toCart () {
      this.$router.push('/cart')
    },
    addCartFn () {
      // 加入购物车
      const userid = localStorage.getItem('userid')
      const loginState = localStorage.getItem('loginState') === 'true'
      if (loginState) {
        // 前端校验为登录状态，接下来后端校验
        addCart({
          userid,
          proid: this.proid,
          num: 1
        }).then(res => {
          if (res.data.code !== '10119') {
            Toast('加入购物车数据')
          }
        })
      } else {
        // 前端校验为未登录状态
        this.$router.push('/login')
      }
    },
    chat () {
      window._MEIQIA('metadata', {
        name: '张津曦', // 美洽默认字段
        address: '吧啦吧啦吧啦', // 美洽默认字段
        sex: '男', // 自定义字段
        hobby: '女' // 自定义字段
      })
      window._MEIQIA('showPanel')
    },
    previewImage () {
      ImagePreview({
        images: this.banners,
        startPosition: this.index - 1,
        onChange: (index) => {
          console.log('111', index)
          this.index = index + 1
        }
      })
    },
    changeSwiper (index) {
      this.index = index + 1
    },
    onSelect ({ index }) {
      switch (index) {
        case 0:
          this.$router.push('/home')
          break
        case 1:
          this.$router.push('/kind')
          break
        case 2:
          this.$router.push('/cart')
          break
        case 3:
          this.$router.push('/user')
          break
        case 4:
          this.showShare = true
      }
    }
  },
  watch: {
    show (newVal) { // 监听视频播放
      if (newVal) {
        this.$refs.vdo.currentTime = 0 // 播放时长为0
        this.$refs.vdo.play()
      } else {
        this.$refs.vdo.pause()
      }
      // newVal ? this.$refs.vdo.play() : this.$refs.vdo.pause()
    }
  }
}
</script>

<style lang="stylus" scoped>
.van-swipe
  height 3.3rem
  background-color #fff
  .van-swipe-item
    width 100%
    .van-image
      width 100%
      img
        width 100%
.my-detail-swiper
  position relative
  .my-indicators
    position absolute
    bottom 20px
    right 0
    width 50px
    height 20px
    background-color #cccc
    text-align  center
    line-height 20px
    border-radius 10px 0 0 10px
  .video-btn
    position absolute
    bottom 20px
    left 50%
    transform translateX(-50%)
    width 83px
    height 30px
    background-color #ffffff
    border-radius 30px
    display flex
    justify-content center
    align-items center
.my-video
  position fixed
  width 100%
  top 50%
  transform translateY(-50%)
.proname
  padding 5px 10px
  font-size 16px
  font-weight bold
.price
  color #ff6666
  del
    color #999
.space
  height 1000px
.container .box .header
  background-color transparent
.fade-enter-active{
  transition: opacity .5s;
}
.fade-leave-active {
  transition: opacity 0s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
</style>
